﻿@inject Microsoft.Extensions.Configuration.IConfiguration _config
@using Microsoft.Extensions.Configuration;
@section styles{
<style>
    .pagination-detail {
        display: none
    }
</style>
}

<div class="content-wrapper">

    <section class="content-header">
        <h1>
            Dashboard
            <small>Control panel</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol>
    </section>

    <section class="content">

        <div class="row">
            <!-- 用户分布 -->
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4 class="box-title">>>站点分布</h4>
                    </div>
                    <div class="box-body">
                        <div class="col-md-10">
                            <div id="userMap" style="width: 100%; height: 400px;">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class='box-content box-statistic'>
                                <h4 style="color:#9287e7"><i class='fa fa-list-alt' style="padding: 0px 10px;"></i>站点数</h4>
                                <h4 class='text-center' style="color:#9287e7">1</h4>
                            </div>

                            <hr class="hr-normal" />

                            <div class='box-content box-statistic'>
                                <h4 style="color:#32d3eb"><i class='fa fa-desktop' style="padding: 0px 10px;"></i>设备数</h4>
                                <h4 class='text-center' style="color:#32d3eb">2</h4>
                            </div>

                            <hr class="hr-normal" />

                            <div class='box-content box-statistic'>
                                <h4 style="color:#feb64d"><i class='fa fa-user' style="padding: 0px 10px;"></i>用户数</h4>
                                <h4 class='text-center' style="color:#feb64d">1</h4>
                            </div>

                            <hr class="hr-normal" />

                            <div class='box-content box-statistic'>
                                <h4 style="color:#5bc49f"><i class='fa fa-user-md' style="padding: 0px 10px;"></i>在线数</h4>

                                <h4 class='text-center' style="color:#5bc49f">1</h4>
                            </div>

                            <hr class="hr-normal" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 报警|故障变化趋势 -->
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4 class="box-title">>>报警|故障变化趋势</h4>
                    </div>
                    <div class="box-body">
                        <div id="echartTrend" style="width: 100%; height: 400px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 高危企业 -->
            <div class="col-md-3">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4 class="box-title">>>高危站点</h4>
                    </div>
                    <div class="box-body" style="; height: 400px;">
                        <table class="table" id="highDanger" style="width: 100%"></table>
                    </div>
                </div>
            </div>
            <!-- 实时报警|故障记录 -->
            <div class="col-md-3">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4 class="box-title">>>实时报警|故障记录</h4>
                    </div>
                    <div class="box-body" style=" height: 400px;">
                        <table class="table" id="table" style="width: 100%;"></table>
                    </div>
                </div>
            </div>
            <!-- 安装设备汇总 -->
            <div class="col-md-3">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4 class="box-title">>>安装设备汇总</h4>
                    </div>
                    <div class="box-body">
                        <div id="echartInstallEquip" style="width: 100%; height: 380px;">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 报警类别汇总 -->
            <div class="col-md-3">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4 class="box-title">>>报警类别汇总</h4>
                    </div>
                    <div class="box-body">
                        <div id="echartAlarmType" style="width: 100%; height: 380px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
</div>

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {

            //报警-故障变化趋势
            var echartTrend = echarts.init(document.getElementById('echartTrend'));
            var optionTrend = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    left: 10,
                    top: 10,
                    data: ['报警', '故障']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['29日', '30日', '01日', '02日', '03日', '04日', '05日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '报警',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '故障',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        data: [0, 0, 0, 0, 0, 0, 0]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            echartTrend.setOption(optionTrend);

            // 安装设备汇总
            var echartInstallEquip = echarts.init(document.getElementById('echartInstallEquip'));
            var optionInstallEquip = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    left: 10,
                    top: 10,
                    data: ['智慧用电安全监测装置', '多功能故障电弧探测器', '其他']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '55%'],
                        label: {
                            formatter: '{b}:{d}%'
                        },
                        data: [
                            { value: 0, name: '智慧电缆沟装置' },
                            { value: 0, name: '多功能故障电弧探测器' },
                            { value: 0, name: '其他' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            echartInstallEquip.setOption(optionInstallEquip);


            // 报警类别汇总
            var echartAlarmType = echarts.init(document.getElementById('echartAlarmType'));
            var optionAlarmType = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    left: 10,
                    top: 10,
                    data: ['漏电', '过热', '其他']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '55%'],
                        label: {
                            formatter: '{b}:{d}%'
                        },
                        data: [
                            { value: 0, name: '漏电' },
                            { value: 0, name: '过热' },
                            { value: 0, name: '其他' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            echartAlarmType.setOption(optionAlarmType);
        });
        var app = new Vue({
            el: "#app",
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    _self.$refs.Home.parentNode.parentNode.classList.add("active");
                    _self.$refs.Home.classList.add("active");
                    setTimeout(function () {
                        //_self.loadDeviceData();
                        _self.loadMap();
                        //_self.loadHighDanger();
                    }, 500)
                });
            },
            methods: {
                loadMap() {
                    _self = this;
                    var map = new BMap.Map("userMap");//创建一个地图
                    //该Point是按纬经度来，而不是经纬度
                    var centerPoint = new BMap.Point(103.003765, 37.414850);//创建一个地理点坐标

                    map.centerAndZoom(centerPoint, 4);
                    //添加鼠标滚动缩放
                    map.enableScrollWheelZoom();
                    yui.$axiosget('/DeviceData/RoughMapList')
                        .then(function (response) {
                            var result = response.data;
                            if (result.length > 0) {
                                var zone = result[0].DeptName;
                                if (zone === "管理员") {
                                    zone = "中国";
                                }
                                var bdary = new BMap.Boundary();
                                zone = "南京市";
                                bdary.get(zone, function (rs) {       //获取行政区域
                                    map.clearOverlays();        //清除地图覆盖物
                                    var count = rs.boundaries.length; //行政区域的点有多少个
                                    if (count === 0) {//判断区域是否合法
                                        return;
                                    }
                                    var pointArray = [];
                                    for (var i = 0; i < count; i++) {
                                        var ply = new BMap.Polygon(rs.boundaries[i],
                                            {
                                                strokeWeight: 3,
                                                strokeColor: "#ff0000",
                                                fillColor: "#FEC107",
                                                fillOpacity: 0.8,
                                                strokeStyle: 'dashed'
                                            }); //建立多边形覆盖物
                                        ply.addEventListener("click", function ()//添加标签的点击事件
                                        {
                                            window.open("/DeviceData/Index");
                                        });
                                        map.addOverlay(ply);  //添加覆盖物
                                        pointArray = pointArray.concat(ply.getPath());
                                    }
                                    map.setViewport(pointArray);    //调整视野
                                });

                            }
                        })
                        .catch(function (error) {
                            console.log(error)
                        });
                },
                loadDeviceData() {
                    _self = this;
                    var obj = [{
                        field: 'ClientName',
                        title: '站点名称',
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var res = "";
                            res = "<a href='/DeviceData/MachineDetails?ClientId=" + row.ClientId + "'>" + row.ClientName + "</a>"
                            return res;
                        }
                    }, {
                        field: 'confirmTime',
                        title: '详情',
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return yui.getNow();
                        }

                    }];
                    yui.tableHeadMini("table", "/DeviceData/List", obj, "POST", "ClientId");
                },
                loadHighDanger() {
                    _self = this;
                    var obj = [{
                        field: 'ClientName',
                        title: '站点名称',
                        align: 'left',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var res = "";
                            res = "<a href='/DeviceData/MachineDetails?ClientId=" + row.ClientId + "'>" + row.ClientName + "</a>"+
                                "<div class='progress'>" +
                                "<div class='progress-bar progress-bar-danger' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 60%;' > "+
                                "</div>"+
                                "</div>"
                            return res;
                        }
                    }];
                    yui.tableMiniMiniMini("highDanger", "/DeviceData/List", obj, "POST", "ClientId");
                }
            }
        });
    </script>
}